<template>
    <div class="tab-bar">
        <template v-for="(item, index) in tabbarData" :key=index>
        <div class="tab-bar-item" :class="{active:currentindex==index}" @click="changeclass(index,item)">
             <img :src=item.image alt="">
             <span class="text">{{ item.text }}</span>
        </div>
        </template>
    </div>
  
</template>

<script setup>
import { useRouter } from 'vue-router';
import tabbarData from '../../assets/data/tabbar.js'
    import {ref} from 'vue'
    // const getAsseturl=(image)=>{
    //     return new URL(`../../assets/img/${img}`,import.meta.url).herf
    // }
    const router=useRouter();
    const currentindex=ref(0);
    const changeclass=(index,item)=>{
        currentindex.value=index;
        router.push(item.path)
    }
</script>

<style lang="less" scoped>
    .tab-bar{
        position: fixed;
        bottom: 0px;
        left: 0px;
        right:0px;
        height: 50px;
        display: flex;
        border-top:1px solid #f9f8f8;
        .tab-bar-item{
        flex:1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .text{
            font-style: 12px;
        }
        img{
            width: 32px;
        }
        &.active{
            color:rgba(233, 218, 49, 0.533)
        }
        } 
    }
    
</style>